import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    FormattedMessage,
    injectIntl,
} from 'react-intl';
import { ControlledVocab } from '@folio/stripes/smart-components';
import {  MultiColumnList,IconButton,Select,Field } from '@folio/stripes/components';
import { stripesConnect, withStripes } from '@folio/stripes/core';

class MyComponent extends Component {
    static manifest = Object.freeze({

    });
    static propTypes = {
        stripes: PropTypes.shape({
            connect: PropTypes.func.isRequired,
        }).isRequired,
        resources: PropTypes.shape({

        }).isRequired,
        intl: PropTypes.object.isRequired,
    };
    constructor(props) {
        super(props);
        this.connectedControlledVocab = props.stripes.connect(ControlledVocab);
    }

    render() {
        const {
            resources,
            intl,
        } = this.props;
        const formatter = {

            name: <FormattedMessage id="ui-party.loans.columns.party.sys.settingName" />,
            code: <FormattedMessage id="ui-party.loans.columns.party.sys.code" />,
            content: <FormattedMessage id="ui-party.loans.columns.party.sys.content" />,
            state: <FormattedMessage id="ui-party.loans.columns.party.sys.state" />,
            actions: (
                <FormattedMessage id="ui-party.loans.columns.operating" />
            )
        };

        return (
            <this.connectedControlledVocab
                {...this.props}
                // We have to unset the dataKey to prevent the props.resources in
                // <ControlledVocab> from being overwritten by the props.resources here.
                dataKey={undefined}
                baseUrl="party/set"
                records="partySetGroup"
                //label={intl.formatMessage({ id: 'ui-users.information.patronGroups' })}
                //labelSingular={intl.formatMessage({ id: 'ui-users.information.patronGroup' })}
                objectLabel={<FormattedMessage id="ui-users.information.patronGroup.users" />}
                visibleFields={[ 'name','code','content','state']}
                hiddenFields={['lastUpdated','numberOfObjects']}
                columnMapping={formatter}

                formatter={{

                    name: item => [<span>{item.name}</span>],
                    state: item => {
                        if (item.state === 1) {
                            return <span>启用</span>;
                        } else if (item.state === 0) {
                            return <span>停用</span>;
                        }
                        return '';
                    },
                    edit: item => [
                        <IconButton
                            size="small"
                            icon="edit"
                            onClick={() => {
                                this.openEditForm(item);
                            }}
                        />
                        ,
                        <IconButton
                            icon="times"

                            aria-label="close"
                            onClick={() => {
                                this.delData(item);
                            }}
                        />
                    ]
                }}
                nameKey="group"
                id="partySetGroup"
                sortby="group"
            />
        );
    }
}

MyComponent.propTypes = {};

export default injectIntl(withStripes(stripesConnect( MyComponent)));
